<!--<script>-->
<!--import { BrowserMultiFormatReader } from '@zxing/library';-->
<!--import { Toast, Dialog, Notify } from 'vant';-->
<!--export default {-->
<!--  name: 'ScanCodePage',  // 扫码页面-->
<!--  data() {-->
<!--    return {-->
<!--      codeReader: null,-->
<!--      tipShow: false,  // 是否展示提示-->
<!--      tipMsg: '',  // 提示文本内容-->
<!--      scanText: '',  // 扫码结果文本内容-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.openScan();-->
<!--  },-->
<!--  watch: {-->
<!--    '$route'(to, from) {-->
<!--      if(to.path == '/ScanCodePage'){  // 当处于该页面时-->
<!--        this.openScan();-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  destroyed(){-->
<!--    this.codeReader.reset();-->
<!--    this.codeReader = null;-->
<!--  },-->
<!--  methods: {-->
<!--    async openScan() {  // 初始化摄像头-->
<!--      this.codeReader = await new BrowserMultiFormatReader();-->
<!--      this.codeReader.getVideoInputDevices().then(videoDevices => {-->
<!--        this.tipMsg = '正在调用摄像头...';-->
<!--        this.tipShow = true;-->
<!--        console.log('get-videoDevices', videoDevices);-->

<!--        // 默认获取摄像头列表里的最后一个设备id，通过几部测试机发现一般前置摄像头位于列表里的前面几位，所以一般获取最后一个的是后置摄像头-->
<!--        let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;-->
<!--        // 一般获取了手机的摄像头列表里不止一个，有的手机摄像头高级多层，会有变焦摄像头等情况，需要做处理-->
<!--        if (videoDevices.length > 1) {-->
<!--          // 一般通过判断摄像头列表项里的 label 字段，'camera2 0, facing back' 字符串含有 'back' 和 '0'，大部分机型是这样，如果有些机型没有，那就还是默认获取最后一个-->
<!--          firstDeviceId = videoDevices.find(el => { return el.label.indexOf('back') > -1 && el.label.indexOf('0') > -1 }) ?-->
<!--              videoDevices.find(el => { return el.label.indexOf('back') > -1 && el.label.indexOf('0') > -1 }).deviceId :-->
<!--              videoDevices[videoDevices.length - 1].deviceId;-->
<!--        }-->
<!--        console.log('get-firstDeviceId', firstDeviceId);-->

<!--        this.decodeFromInputVideoFunc(firstDeviceId);-->
<!--      }).catch(err => {-->
<!--        this.tipShow = false;-->
<!--        console.error(err);-->
<!--      });-->
<!--    },-->
<!--    decodeFromInputVideoFunc(firstDeviceId) {  // 使用摄像头扫描-->
<!--      this.codeReader.reset(); // 重置-->
<!--      this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {-->
<!--        this.tipMsg = '正在尝试识别...';-->
<!--        if (result) {-->
<!--          console.log('扫码结果', result);-->
<!--          this.scanText = result.text;-->
<!--          if (this.scanText) {-->
<!--            this.tipShow = false;-->
<!--            Dialog.confirm({  // 获取到扫码结果进行弹窗提示，这部分接下去的代码根据需要，读者自行编写了-->
<!--              title: '扫码结果',-->
<!--              message: this.scanText,-->
<!--            }).then(() => {  // 点击确认-->
<!--              // 在这里添加跳转逻辑，首先要验证扫描结果是否是合法的网址格式，可以使用简单的正则表达式验证（这里只是简单验证，更严谨的验证可根据实际需求完善）-->
<!--              const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;-->
<!--              if (urlPattern.test(this.scanText)) {-->
<!--                window.location.href = this.scanText;-->
<!--              } else {-->
<!--                console.error('扫描到的内容不是合法的网址格式，无法进行跳转');-->
<!--                // 这里也可以根据需求进行其他提示操作，比如通过组件弹出提示框告知用户扫描结果不是合法网址等-->
<!--              }-->
<!--            }).catch(() => {  // 点击取消-->
<!--                console.log('用户点击了取消');-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    clickIndexLeft(){  // 返回上一页-->
<!--      this.$destroy();-->
<!--      this.$router.go(-1);-->
<!--      // window.location.href = document.referrer;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <div class="scan-page">-->
<!--    &lt;!&ndash; 返回导航栏 &ndash;&gt;-->
<!--    <van-nav-bar title="扫描二维码/条形码" left-text="取消" left-arrow-->
<!--                 fixed class="scan-index-bar" @click-left="clickIndexLeft()"-->
<!--    ></van-nav-bar>-->
<!--    &lt;!&ndash; 扫码区域 &ndash;&gt;-->
<!--    <video ref="video" id="video" class="scan-video" autoplay></video>-->
<!--    &lt;!&ndash; 提示语 &ndash;&gt;-->
<!--    <div v-show="tipShow" class="scan-tip">{{ tipMsg }}</div>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--.scan-index-bar{-->
<!--  background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);-->
<!--  .van-nav-bar__title, .van-nav-bar__arrow, .van-nav-bar__text{-->
<!--    color: #fff !important;-->
<!--  }-->
<!--}-->
<!--.scan-page{-->
<!--  min-height: 100vh;-->
<!--  background-color: #363636;-->
<!--  overflow-y: hidden;-->
<!--  .scan-video{-->
<!--    height: 85vh;-->
<!--  }-->
<!--  .scan-tip{-->
<!--    width: 100vw;-->
<!--    text-align: center;-->
<!--    color: white;-->
<!--    font-size: 5vw;-->
<!--  }-->
<!--}-->
<!--</style>-->




<template>
  <div class="scan-page">
    <!-- 返回导航栏 -->
    <van-nav-bar title="扫描二维码/条形码" left-text="取消" left-arrow
                 fixed class="scan-index-bar" @click-left="clickIndexLeft()"
    ></van-nav-bar>
    <!-- 扫码区域 -->
    <div class="scan-area">
      <input type="file" accept="image/*" @change="handleFileUpload" />
      <canvas ref="canvas" class="scan-canvas"></canvas>
    </div>
    <!-- 提示语 -->
    <div v-show="tipShow" class="scan-tip">{{ tipMsg }}</div>
  </div>
</template>

<script>
import jsQR from 'jsqr';
import { Dialog } from 'vant';

export default {
  name: 'ScanCodePage',  // 扫码页面
  data() {
    return {
      tipShow: false,  // 是否展示提示
      tipMsg: '',  // 提示文本内容
      scanText: '',  // 扫码结果文本内容
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.tipMsg = '正在读取图片...';
        this.tipShow = true;

        const reader = new FileReader();
        reader.onload = (e) => {
          const img = new Image();
          img.onload = () => {
            const canvas = this.$refs.canvas;
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height);

            if (code) {
              this.scanText = code.data;
              this.tipShow = false;
              Dialog.confirm({
                title: '扫码结果',
                message: this.scanText,
              }).then(() => {
                const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
                if (urlPattern.test(this.scanText)) {
                  window.location.href = this.scanText;
                } else {
                  console.error('扫描到的内容不是合法的网址格式，无法进行跳转');
                  this.$toast('扫描结果不是合法网址，无法跳转');
                }
              }).catch(() => {
                console.log('用户点击了取消');
              });
            } else {
              this.tipShow = false;
              this.$toast('未检测到二维码，请重新上传图片');
            }
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    clickIndexLeft() {  // 返回上一页
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.scan-index-bar {
  background-image: linear-gradient( -45deg, #42a5ff, #59cfff);
  .van-nav-bar__title, .van-nav-bar__arrow, .van-nav-bar__text {
    color: #fff !important;
  }
}
.scan-page {
  min-height: 100vh;
  background-color: #363636;
  overflow-y: hidden;
  .scan-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
  }
  .scan-canvas {
    border: 1px solid #ccc;
    margin-top: 20px;
  }
  .scan-tip {
    width: 100vw;
    text-align: center;
    color: white;
    font-size: 5vw;
  }
}
</style>
